<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="status-content">
				<text class="time">{{ currentTime }}</text>
				<view class="status-icons">
					<uni-icons type="signal" size="16" color="#333"></uni-icons>
					<uni-icons type="wifi" size="16" color="#333"></uni-icons>
					<uni-icons type="battery" size="16" color="#333"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 头部区域 -->
		<view class="header">
			<view class="header-content">
				<view class="welcome">
					<text class="greeting">{{ greeting }}</text>
					<text class="username">{{ username }}</text>
				</view>
				<view class="avatar" @click="goToProfile">
					<uni-icons type="person-filled" size="24" color="#4980FF"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 快捷功能区域 -->
		<view class="quick-actions">
			<uni-section title="快捷功能" type="line">
				<uni-grid :column="4" :highlight="true" @change="onQuickActionClick">
					<uni-grid-item v-for="(item, index) in quickActions" :key="index">
						<view class="grid-item-box">
							<uni-icons :type="item.icon" size="30" :color="item.color"></uni-icons>
							<text class="text">{{ item.text }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>

		<!-- 数据统计卡片 -->
		<view class="stats-section">
			<uni-section title="今日数据" type="line">
				<view class="stats-grid">
					<uni-card v-for="(stat, index) in todayStats" :key="index" :title="stat.title" :extra="stat.value" :note="stat.note">
						<view class="stat-content">
							<uni-icons :type="stat.icon" size="24" :color="stat.color"></uni-icons>
							<text class="stat-text">{{ stat.description }}</text>
						</view>
					</uni-card>
				</view>
			</uni-section>
		</view>

		<!-- 最近活动 -->
		<view class="recent-activities">
			<uni-section title="最近活动" type="line">
				<uni-list>
					<uni-list-item v-for="(activity, index) in recentActivities" :key="index" 
						:title="activity.title" 
						:note="activity.time" 
						:rightText="activity.status"
						:showArrow="true"
						@click="viewActivity(activity)">
						<template v-slot:header>
							<uni-icons :type="activity.icon" size="20" :color="activity.color"></uni-icons>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
		</view>

		<!-- 底部导航提示 -->
		<view class="bottom-tip">
			<uni-notice-bar text="点击底部导航栏切换不同功能模块" :showClose="false"></uni-notice-bar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTime: '',
				greeting: '',
				username: '管理员',
				quickActions: [
					{ text: '设备管理', icon: 'settings', color: '#4980FF' },
					{ text: '审批流程', icon: 'paperplane', color: '#FF6B6B' },
					{ text: '物料管理', icon: 'shop', color: '#4ECDC4' },
					{ text: '计量管理', icon: 'chart', color: '#45B7D1' }
				],
				todayStats: [
					{ title: '在线设备', value: '156台', note: '较昨日 +12', icon: 'gear', color: '#4980FF', description: '设备运行正常' },
					{ title: '待审批', value: '8条', note: '需要处理', icon: 'paperplane', color: '#FF6B6B', description: '审批事项' },
					{ title: '今日加油', value: '2.5吨', note: '柴油消耗', icon: 'fire', color: '#FFA500', description: '燃料消耗' }
				],
				recentActivities: [
					{ title: '设备进场审批', time: '10分钟前', status: '待处理', icon: 'paperplane', color: '#FF6B6B' },
					{ title: '加油记录上传', time: '30分钟前', status: '已完成', icon: 'checkmarkempty', color: '#4ECDC4' },
					{ title: 'OBD数据同步', time: '1小时前', status: '已完成', icon: 'gear', color: '#4980FF' }
				]
			}
		},
		onLoad() {
			this.updateTime()
			this.updateGreeting()
			// 每分钟更新时间
			setInterval(() => {
				this.updateTime()
			}, 60000)
		},
		methods: {
			updateTime() {
				const now = new Date()
				this.currentTime = now.toLocaleTimeString('zh-CN', { 
					hour: '2-digit', 
					minute: '2-digit' 
				})
			},
			updateGreeting() {
				const hour = new Date().getHours()
				if (hour < 6) {
					this.greeting = '夜深了'
				} else if (hour < 9) {
					this.greeting = '早上好'
				} else if (hour < 12) {
					this.greeting = '上午好'
				} else if (hour < 14) {
					this.greeting = '中午好'
				} else if (hour < 18) {
					this.greeting = '下午好'
				} else if (hour < 22) {
					this.greeting = '晚上好'
				} else {
					this.greeting = '夜深了'
				}
			},
			onQuickActionClick(e) {
				const action = this.quickActions[e.detail.index]
				switch(action.text) {
					case '设备管理':
						uni.switchTab({ url: '/pages/equipment/index' })
						break
					case '审批流程':
						uni.switchTab({ url: '/pages/approval/index' })
						break
					case '物料管理':
						uni.navigateTo({ url: '/pages/material/index' })
						break
					case '计量管理':
						uni.navigateTo({ url: '/pages/metering/index' })
						break
				}
			},
			goToProfile() {
				uni.switchTab({ url: '/pages/mine/index' })
			},
			viewActivity(activity) {
				uni.showToast({
					title: `查看${activity.title}`,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #F5F7FA;
		min-height: 100vh;
	}

	.status-bar {
		height: 44px;
		background-color: #4980FF;
		padding: 0 16px;
	}

	.status-content {
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.time {
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 500;
	}

	.status-icons {
		display: flex;
		gap: 8px;
	}

	.header {
		background: linear-gradient(135deg, #4980FF 0%, #2B6BFF 100%);
		padding: 20px 16px;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.welcome {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.greeting {
		color: rgba(255, 255, 255, 0.8);
		font-size: 14px;
	}

	.username {
		color: #FFFFFF;
		font-size: 20px;
		font-weight: 600;
	}

	.avatar {
		width: 40px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.quick-actions {
		margin: 16px;
	}

	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 16px 8px;
		gap: 8px;
	}

	.text {
		font-size: 12px;
		color: #333;
		text-align: center;
	}

	.stats-section {
		margin: 16px;
	}

	.stats-grid {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.stat-content {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.stat-text {
		font-size: 14px;
		color: #666;
	}

	.recent-activities {
		margin: 16px;
	}

	.bottom-tip {
		margin: 16px;
	}
</style>
